<template>
    <div>
        <el-dialog  :before-close="backToHome"   :visible.sync="customerViewVisible" width="70%" :close-on-click-modal="false" title="客户视图" class="paddchang"   top="0vh"  :append-to-body="true">
        <div class="content" style="margin-top: 10px">
                <el-tabs v-model="activeName" type="border-card">
                    <el-tab-pane   name="first" >
                        <span slot="label">客户信息</span>
                        <cust-infor :customer="customer" v-if="activeName == 'first'"> </cust-infor>
                    </el-tab-pane>
                    <el-tab-pane  name="second">
                        <span slot="label" >行动时间线</span>
                       <action-record v-if="activeName == 'second'"></action-record>
                    </el-tab-pane>
                    <el-tab-pane  name="third">
                        <span slot="label">销售机会</span>
                      <sale-chance v-if="activeName == 'third'"></sale-chance>
                    </el-tab-pane>
                    <el-tab-pane  name="fourth">
                        <span slot="label">合同</span>
                     <c-view-contract :customerData="customer" v-if="activeName == 'fourth'"></c-view-contract>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import CustInfor from "./view_custInfor";
    import ActionRecord from "./view_actionRecord";
    import SaleChance from "./view_SaleChance";
    import CViewContract from "./view_Contract";
    import ViewClientFlow from "./view_clientFlow";


    export default {
        name: "customerView"

        ,components: {ViewClientFlow, CViewContract, SaleChance, ActionRecord, CustInfor},
        data:function (){
           return{
               customerViewVisible:true
               ,activeName:"first"
               ,customer:[] //主页面传来的客户数据
               ,nameIsNew:'first'
           }
        },
        created() {
            /*获取从 customerManage 页面传来的客户对象*/
            this.customer = this.$route.query.cid
            /*打开customerView视图（将customer对象存入store）*/
            this.$store.dispatch("setVueCustomerView",this)
            window.console.log("customerView页面输出的"+this.customer)
        }
        ,methods:{
            /*关闭customerView视图的回调 （回主页面）*/
            backToHome(){
                this.$router.go(-1);/*back()*/
            },

        }
    }
</script>

<style scoped>
    .el-dialog/deep/.el-dialog__body{
        padding: 10px 20px;
    }
</style>